import { Route, Routes } from "react-router-dom"
import NavBar from "./components/NavBar"
import "./App.less"
import AuthRoute from "./router/AuthRoute"
import router from "./router"
function App() {
  // 处理我们的routers 类似于vue中的路由守卫
  const RouteAuthFun = (routeList) => {
    return routeList.map((item) => {
      return (
        <Route
          path={item.path}
          element={
            <AuthRoute auth={item.auth} key={item.path}>
              {item.element}
            </AuthRoute>
          }
          key={item.path}
        >
          {/* 递归调用，因为可能存在多级的路由 */}
          {item?.children && RouteAuthFun(item.children)}
        </Route>
      )
    })
  }
  return (
    <div className="app">
      <div className="body">
        {/* 带有路由守卫的写法 */}
        <Routes>{RouteAuthFun(router)}</Routes>

        {/* <Routes>
          <Route exact path="/" element={<AuthRoute></AuthRoute>}></Route>
          <Route
            exact
            path="/data"
            element={routeGuard(<Data />, "data")}
          ></Route>
          <Route
            exact
            path="/user"
            element={routeGuard(<User />, "user")}
          ></Route>
          <Route exact path="/login" element={<Login />}></Route>
          <Route
            exact
            path="/detail"
            element={routeGuard(<Detail />, "detail")}
          ></Route>
          <Route
            exact
            path="/userinfo"
            element={routeGuard(<UserInfo />, "userinfo")}
          ></Route>
          <Route
            exact
            path="/account"
            element={routeGuard(<Account />, "account")}
          ></Route>
          <Route
            exact
            path="/about"
            element={routeGuard(<About />, "about")}
          ></Route>
        </Routes> */}
      </div>
      <div className="bottom">
        <NavBar />
      </div>
    </div>
  )
}

export default App
